﻿@page "/"
@using iOSClub.App.Share
@using Microsoft.AspNetCore.Components.Authorization
@inject NavigationManager Nav
@inject HttpClient HttpClient
@inject AuthenticationStateProvider authStateProvider

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

<style>
    .material-symbols-outlined {
        font-variation-settings:
            'FILL' 0,
            'wght' 400,
            'GRAD' 0,
            'opsz' 24
        ;
        font-size: 48px;
    }
</style>

<PageTitle>您的iMember中心 - 西建大iOS Club</PageTitle>
<meta name="referrer" content="never">

<Flex Justify="center" Align="center">
    <GridRow Class="block" Gutter="(20, 24)">
        <GridCol Xs="24" Sm="24" Md="12" Lg="12" Xl="8" Xxl="8">
            <a href="/PersonalData">
                <Card Hoverable Class="card" Bordered="false">
                    @if (Member.Identity != "Founder")
                    {
                        <Image Style="height: 100px;width: 100px" Preview="false" Src="@(Member.Gender == "男" ? "Centre/男生.png" : "Centre/女生.png")"/>
                    }
                    else
                    {
                        <Image Style="height: 100px;width: 100px" Preview="false" Src="iOS_Club_LOGO.png"/>
                    }
                    <Title style="font-size: 36px;">@Member.UserName</Title>
                    <Paragraph Type="secondary">ID :@Member.UserId</Paragraph>
                    <Paragraph Style="font-size: 16px" Strong>@MemberModel.IdentityDictionary[Member.Identity]</Paragraph>
                </Card>
            </a>
        </GridCol>
        <GridCol Xs="24" Sm="24" Md="12" Lg="12" Xl="16" Xxl="16">
            <AppleCard FrostedGlass="true">
                <TitleTemplate>
                    <Title Level="2">iTool</Title>
                    <Paragraph Type="secondary">iOS Club出品的小工具</Paragraph>
                </TitleTemplate>
                <ContextTemplate>
                    @if (Tools.Count == 0)
                    {
                        <Empty Image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg" Style="padding: 20px"
                               Description="@("社团还没加入iOS App")"/>
                    }
                    else
                    {
                        <Space Size=@(("16", "16")) Wrap>
                            @foreach (var item in Tools)
                            {
                                <SpaceItem>
                                    <Button Type="@ButtonType.Text" OnClick="@(() => Nav.NavigateTo(item.Url))"
                                            Class="card" Style="padding: 0;height: auto;">
                                        @if (item.IconUrl.StartsWith("Icon"))
                                        {
                                            <span class="material-symbols-outlined">
                                                @item.IconUrl.Split(':').Last()
                                            </span>
                                        }
                                        else if (item.IconUrl.StartsWith("Text"))
                                        {
                                            <Text Style="font-size: 48px">@item.IconUrl.Split(':').Last()</Text>
                                        }
                                        else
                                        {
                                            <Image Style="height: 48px;width: 48px" Preview="false" Src="@item.IconUrl"/>
                                        }
                                        <Paragraph>@item.Name</Paragraph>
                                    </Button>
                                </SpaceItem>
                            }
                        </Space>
                    }
                </ContextTemplate>
            </AppleCard>
        </GridCol>
        @if (Member.Identity != "Member" && Member.Identity != "Founder")
        {
            <GridCol Xs="24" Sm="24" Md="12" Lg="12" Xl="16" Xxl="16">
                <AppleCard>
                    <TitleTemplate>
                        <Title Level="2">我的任务</Title>
                        <Paragraph Type="secondary">iStaff 的任务</Paragraph>
                    </TitleTemplate>
                    <ContextTemplate>
                        @if (Tasks.Length == 0)
                        {
                            <Empty Image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg" Style="padding: 20px" Description="@("您的任务都已经完成了")"/>
                        }
                        else
                        {
                            <AntList DataSource="@Tasks">
                                <ListItem>
                                    <ListItemMeta>
                                        <TitleTemplate>
                                            <Space Align="center" Size="@("large")">
                                                <SpaceItem>
                                                    <h1>@context.Title</h1>
                                                </SpaceItem>
                                                <SpaceItem>
                                                    <Icon Type="team"/>
                                                    @context.Users.Count.ToString()
                                                </SpaceItem>
                                            </Space>
                                        </TitleTemplate>
                                        <DescriptionTemplate>
                                            <Text Type="secondary">@($"{context.StartTime} - {context.EndTime}")</Text>
                                            <Tag Color="@TaskColor(context)">@TaskString(context)</Tag>
                                        </DescriptionTemplate>
                                    </ListItemMeta>
                                </ListItem>
                            </AntList>
                        }
                    </ContextTemplate>
                </AppleCard>
            </GridCol>
            <GridCol Xs="24" Sm="24" Md="12" Lg="12" Xl="8" Xxl="8">
                <AppleCard>
                    <TitleTemplate>
                        <Title Level="2">社团资源</Title>
                        <Paragraph Type="secondary">iOS Club资源全览</Paragraph>
                    </TitleTemplate>
                    <ContextTemplate>
                        @if (Resources.Length == 0)
                        {
                            <Empty Image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg" Style="padding: 20px" Description="@("社团现在还没有资源")"/>
                        }
                        else
                        {
                            <AntList DataSource="@Resources" Style="overflow: auto">
                                <ListItem>
                                    <ListItemMeta Title="@context.Name">
                                        <DescriptionTemplate>
                                            <Text Type="secondary">@context.Description</Text>
                                            @foreach (var s in context.Tag?.Split(",")!)
                                            {
                                                <Tag>@s</Tag>
                                            }
                                        </DescriptionTemplate>
                                    </ListItemMeta>
                                </ListItem>
                            </AntList>
                        }
                    </ContextTemplate>
                </AppleCard>
            </GridCol>
        }
        else if (Member.Identity != "Founder" && !string.IsNullOrEmpty(Member.UserId))
        {
            <GridCol Span="24">
                <AppleCard>
                    <TitleTemplate>
                        <Title Level="2">我的任务</Title>
                        <Paragraph Type="secondary">iMember 的任务</Paragraph>
                    </TitleTemplate>
                    <ContextTemplate>
                        @if (Tasks.Length == 0)
                        {
                            <Empty Image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg" Style="padding: 20px" Description="@("您的任务都已经完成了")"/>
                        }
                        else
                        {
                            <AntList DataSource="@Tasks">
                                <ListItem>
                                    <ListItemMeta>
                                        <TitleTemplate>
                                            <Space Align="center" Size="@("large")">
                                                <SpaceItem>
                                                    <h1>@context.Title</h1>
                                                </SpaceItem>
                                                <SpaceItem>
                                                    <Icon Type="team"/>
                                                    @context.Users.Count.ToString()
                                                </SpaceItem>
                                            </Space>
                                        </TitleTemplate>
                                        <DescriptionTemplate>
                                            <Text Type="secondary">@($"{context.StartTime} - {context.EndTime}")</Text>
                                            <Tag Color="@TaskColor(context)">@TaskString(context)</Tag>
                                        </DescriptionTemplate>
                                    </ListItemMeta>
                                </ListItem>
                            </AntList>
                        }
                    </ContextTemplate>
                </AppleCard>
            </GridCol>
        }
    </GridRow>
</Flex>

<br/>
<br/>
<br/>

<Flex Justify="center" Align="center" style="background: #ffffff">
    <div class="block">
        <br/>
        <div class="apple-card-header">
            <Title Level="2">订阅文章</Title>
        </div>
        <div class="apple-card-context">
            @if (Entries.Length == 0)
            {
                <Empty Image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg" Style="padding: 20px"
                       Description="@("当前无订阅文章")"/>
            }
            else
            {
                @foreach (var context in Entries)
                {
                    <a href="@context.Url" target="_blank" class="a-btn">
                        <Flex Justify="space-between" Align="center" Style="height: 67px">
                            <p>@($"{context.Title}")</p>
                            <Paragraph Type="secondary">@context.DateTime.ToString("yyyy-MM-dd")</Paragraph>
                        </Flex>
                    </a>
                }
            }
        </div>
    </div>
</Flex>

<Footer style="text-align: center;">
    <p>
        Copyright
        <Icon Type="copyright" Theme="outline"/>
        2024 iOS Club of XAUAT
    </p>
    <div>
        <Space>
            <Split>
                <Divider Type="DirectionVHType.Vertical"/>
            </Split>
            <ChildContent>
                <SpaceItem Class="desktop-phone-flex">
                    <a href="https://cn.xauat.edu.cn/" target="_blank">西安建筑科技大学</a>
                </SpaceItem>
                <SpaceItem>
                    <a href="https://beian.miit.gov.cn/" target="_blank">备案号 陕ICP备2024031872号</a>
                </SpaceItem>
                <SpaceItem Class="desktop-phone-flex">
                    <a href="https://gitee.com/XAUATiOSClub" target="_blank">我们的Gitee组织</a>
                </SpaceItem>
            </ChildContent>
        </Space>
    </div>
</Footer>

<style>
    .ant-layout{
        background-image: linear-gradient(to bottom right, #ff6b6b, #7171ae, #10bce7);
        overflow: auto;
    }

    .ant-layout-content{
        min-height: 100vh;
    }

    .Layout-Header{
        background: rgba(255, 255, 255, 0.3);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
        padding-left: 10px;
        padding-right: 10px;
        margin: 10px;
        border-radius: 10px;
    }

    .card{
        border-radius: 20px;
        padding: 10px;
        height: 300px;
        background-color: #fff;
    }

    .card:hover{
        animation: CardDisplay 0.2s ease;
        transform: scale(1.02)
    }

    .card:not(:hover) {
        animation: CardDisplay2 0.2s ease;
    }

    .block{
        width: 80%;
        margin-top: 45px;
        margin-bottom: 45px;
    }

    .a-btn {
        display: inline-block;
        transition: .2s;
        cursor: pointer;
        margin: 0 0 5px 5px;
        width: 100%;
        height: 60px;
        border-radius: 10px;
        padding: 5px;
        border: none;
        font-size: 18px;
        color: #1c1f23;
    }

    .a-btn:hover {
        background-color: #f3f5f7;
        color: #1c1f23;
        transform: scale(1.02);
    }
</style>